<template>
	<view class="content-headImage">
		<view class="content-headImage-item">
			<view class="personal-information">
				<image src="/static/images/banner/touXiang01.png"></image>
				<view class="nick-name-item">
					<view>{{postD.nickName}}</view>
					<view>{{postD.createTime}}</view>
				</view>
			</view>
			<view class="content-button">
				<view class="content-button-item">
					<view>+关注</view>
				</view>
			</view>
		</view>
		<!-- 设置分隔线 -->
		<!-- <u-line></u-line> -->
		<view class="post-content">
			<view>{{postD.content}}</view>
			<view class="content-Image-item" v-show="postD.imgUrl">
				<image :src="postD.imgUrl"></image>
			</view>
		</view>
		<!-- 底部栏 -->
		<view class="bottom-comment">
			<view class="bottom-comment-item">
				<view class="comment">
					<view>
						评论一句前排打call!
					</view>
				</view>
				<view class="major-imag">
					<view class="imag-comment">
						<image src="/static/images/banner/comment.png"></image>
					</view>
					<view class="imag-collect">
						<image v-show="showFirstView" @click="handleImageClick" src="/static/images/banner/collect.png">
						</image>
						<image v-show="!showFirstView" @click="handleImageClick1"
							src="../../static/images/icon/collect02.png"></image>
					</view>
					<!-- <view class="imag-collect" v-show="!showFirstView">
						<image src="../../static/images/icon/collect02.png"></image>
					</view> -->
					<view class="imag-share">
						<image src="/static/images/banner/share.png"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 收藏成功提示信息 -->
		<u-toast ref="uToastRef"></u-toast>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	const postD = ref({
		nickName: '',
		content: '',
		imgUrl: '',
		createTime: ''
	})
	//使用onLoad在此页面接收Recommend页面的参数
	onLoad((option) => {
		//将页数转化为对象形式
		postD.value = JSON.parse(option.data)
		console.log(postD, '页面数据是个啥')
	})
	const value = ref('')
	// 初始时显示第一个 收藏图片view
	const showFirstView = ref(true);
	//设置收藏成功提示信息
	const uToastRef = ref(null)
	// 假设这是点击事件处理函数
	function handleImageClick() {
		showFirstView.value = false; // 点击后切换为显示第二个view
		if (showFirstView.value == false) {
			uToastRef.value.show({
				message: '收藏成功',
				type: 'default',
				position: 'center'
			})
		}
	}

	function handleImageClick1() {
		showFirstView.value = true; // 点击后切换为显示第一个view
		if (showFirstView.value == true) {
			uToastRef.value.show({
				message: '取消收藏',
				type: 'default',
				position: 'center'
			})
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.content-headImage {
		padding: 15rpx;

		.content-headImage-item {
			display: flex;
			align-items: center;
			position: relative;

			.personal-information {
				display: flex;
				align-items: center;
				// font-size: 50rpx;
				flex: 1;

				image {
					margin-right: 10rpx;
					width: 60rpx;
					height: 60rpx;
				}

				.nick-name-item {
					display: flex;
					flex-direction: column;
				}
			}
		}

		.content-button {
			display: flex;
			align-items: center;
			flex: 1;
			justify-content: end;

			.content-button-item {
				font-size: 28rpx;
				line-height: 50rpx;
				// position: absolute;
				background-color: #FF7F50;
				color: #fff;
				// top: 0rpx;
				border-radius: 10rpx;

				view {
					padding: 3rpx 20rpx;
				}

				right: 30rpx;
			}
		}

		.post-content {
			margin-top: 20rpx;
			font-size: 35rpx;
			.content-Image-item{
				margin-top: 20rpx;
			}
		}

		.bottom-comment {
			position: fixed;
			bottom: 0rpx;
			// background-color: #fff;
			background-color: #ADD8E6;
			// text-shadow: #FF7F50;
			width: 100%;
			height: 120rpx;

			.bottom-comment-item {
				display: flex;
				align-items: center;

				.comment {
					flex: 1;
					// padding: 20rpx;
					width: 300rpx;
					height: 80rpx;
					margin: 20rpx 15rpx;
					// border: 2rpx solid 	#A9A9A9;
					border-radius: 30rpx;
					background-color: #A9A9A9;
					color: #fff;

					view {
						text-align: center;
						padding: 20rpx 2rpx;
					}
				}

				.major-imag {
					display: flex;
					flex: 1;
					justify-content: start;

					view {
						margin-right: 25rpx;
						margin-left: 10rpx;
					}

					image {
						// margin-bottom: 10rpx;
						width: 50rpx;
						height: 50rpx;
					}
				}

			}
		}
	}
</style>